var address = document.querySelector('.top_ul>li:first-child')
var content = document.getElementsByClassName('content')[0]
//全部地址的关开
let flg = true
address.onclick = function () {
    if (flg) {
        document.getElementsByClassName('allcity')[0].style.display = 'flex'
        flg = false
    } else {
        document.getElementsByClassName('allcity')[0].style.display = 'none'
        flg = true
    }

}
//灰色点击关闭
grey.onclick = function () {
    close()
}
//封装关闭功能
function close() {
    document.getElementsByClassName('allcity')[0].style.display = 'none'
}


let _city = localStorage.getItem('city')
let cityName = JSON.parse(_city)?.name || '北京'
let cityId = JSON.parse(_city)?.cityId || '110100'

//左上角的地址切换
city.innerHTML = `<span>${cityName}</span><i class="icon-xiala2"></i>`

//左上角的点击跳转
city.onclick = function () {
    window.open('./city.html')
}

axios.get(`https://m.maizuo.com/gateway?cityId=${cityId}&ticketFlag=1`, {
    headers: {
        "X-Host": "mall.film-ticket.cinema.list"
    }
}).then(res => {
    let data = res?.data?.data?.cinemas
    console.log(data)
    allCon(data)
    chaCity(data)
})
//插入全部内容
function allCon(data) {
    let image = ''
    content.innerHTML = image
    data.map(item => {
        image += ` <li>
            <div><span>${item.name}</span><span>${item.address}</span></div>
            <div><span>￥${item.lowPrice / 100}起</span><span>距离未知</span></div>
                </li>`
    })
    content.innerHTML = image
}
//对城市的插入
function chaCity(data) {
    let a = document.querySelector('.allcity>ul')
    let smallCity = [...new Set(data.map(item => item.districtName))]
    let cityArray = smallCity.map(item => {
        return {
            letter: item,
            items: data.filter(_item => _item.districtName === item)
        }
    })
    console.log(smallCity, cityArray)
    smallCity.forEach(item => {
        let lis = document.createElement('li')
        lis.innerHTML = `<li>${item}</li>`
        a.appendChild(lis)
    })
    //城市点击tab切换
    let cityLi = document.querySelectorAll('.allcity>ul>li')
    console.log(cityLi)
    for (let i = 0; i < smallCity.length + 1; i++) {
        cityLi[i].onclick = function () {
            for (let j = 0; j < smallCity.length + 1; j++) {
                cityLi[j].classList.remove('active')
            }
            cityLi[i].classList.add('active')
            if (i == 0) {
                allCon(data)
                address.innerHTML = `全城<span class="icon-xiala2"></span>`
            } else {
                let image = ''
                cityArray.forEach(item => {
                    if (smallCity[i - 1] === item.letter) {
                        content.innerHTML = image
                        item.items.forEach(_item => {
                            image += ` <li>
            <div><span>${_item.name}</span><span>${_item.address}</span></div>
            <div><span>￥${_item.lowPrice / 100}起</span><span>距离未知</span></div>
                </li>`
                        })
                        content.innerHTML = image
                        address.innerHTML = `${smallCity[i - 1]}<span class="icon-xiala2"></span>`
                    }
                })

            }

            close()
        }
    }
}
//封装一个对除了全部城市的内容切换
